<template>
  <div>
    这是table组件
    <el-button @click="getReq">get请求</el-button>
    <el-button @click="getDelete">delete请求</el-button>
    <el-button @click="getPost">post请求</el-button>
    <el-button @click="getPut">put请求</el-button>

    <el-button type="primary" @click="getAdd">新增</el-button>
    <el-button type="primary" @click="resetForm">重置表单</el-button>

  <el-form ref="form" label-width="100px" :model="formData">
      <!-- 每个表单控件 -->
    <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
        <el-input v-model='formData.age'></el-input>
    </el-form-item>
    <el-form-item label="存款" prop="money">
        <el-input v-model='formData.money'></el-input>
    </el-form-item>
    <el-form-item label="手机号" prop="phone">
        <el-input v-model='formData.phone'></el-input>
    </el-form-item>
  </el-form>
  {{formData}}





    <el-table :data="TableList" border>
      <el-table-column label="id" prop="id"></el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
      <el-table-column label="存款" prop="money"></el-table-column>
      <el-table-column label="手机号" prop="phone"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="getUpdate(scope.row)">更新</el-button>
          <el-button type="text" @click="getDeleteRow(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
//在table.vue组件中实现el-table表格，表格固定列有两个按钮，删除与更新
//调用get请求拿到表格数据，渲染到el-table中去
import axios from "axios";
export default {
  data() {
    return {
      TableList: [],
      formData:{
          name:'',
          age:'',
          money:'',
          phone:''
      }
    };
  },

  mounted() {
    this.getTableList();
  },

  methods: {
    //传参方式不同
    //get
    getReq() {
      axios
        .get("http://127.0.0.1:3000/api/test/list/testGet", {
          params: { name: "这是名称", age: "这是年龄" },
        })
        .then((res) => {
          console.log(res);
        });
    },
    getDelete() {
      axios
        .delete("http://127.0.0.1:3000/api/test/delete/testDelete", {
          params: { name: "这是delete请求" },
        })
        .then((res) => {
          console.log(res);
        });
    },
    //post请求没有params,直接给参数即可
    getPost() {
      axios
        .post("http://127.0.0.1:3000/api/test/add/testPost", {
          post1: "这是第一个参数",
          post2: "这是第二个参数",
        })
        .then((res) => {
          console.log(res);
        });
    },
    //put请求
    getPut() {
      axios
        .put("http://127.0.0.1:3000/api/test/update/testUpdate", {
          put1: "这是第一个参数",
          put2: "这是第二个参数",
        })
        .then((res) => {
          console.log(res);
        });
    },

    //查找数据
    getTableList() {
      axios.get("http://127.0.0.1:3000/api/test/list").then((res) => {
        console.log(res);
        console.log(res.data);
        this.TableList = res.data;
      });
    },

    //删除数据
   getDeleteRow(row) {
        this.$confirm('确定删除该条数据吗').then(()=>{
            axios.delete("http://127.0.0.1:3000/api/test/delete", {
                params: {id:row.id }
              })
              .then((res) => {
                console.log(res);
                this.getTableList(); 
              });

        })
    },
    //增加数据
    // this.formData---->(name:123,age:12)
    // 把对象中的属性在同级中展开
    //(...this.formData)--->(name:123,age:12)

     // 第一步：在el-form上面声明ref属性
     // 第二步：在el-form-item上面声明prop属性
     // 第三步：调用resetFields()方法

    // 将formData的对象值重置为初始化值
    resetForm(){
      this.$refs.form.resetFields()
    },
    getAdd() {
      axios
        .post("http://127.0.0.1:3000/api/test/add", 
        { ...this.formData}).then((res) => {
          console.log(res);
          this.getTableList();
          this.resetForm()
        });
    },
    //修改数据
    getUpdate(row) {
      axios
        .put("http://127.0.0.1:3000/api/test/update", {
          id: row.id,
          ...this.formData
        })
        .then((res) => {
          this.getTableList();
          this.resetForm();
        });
    },
  },
};
</script>